<script setup lang="ts">
import { ref } from 'vue'
import EbookForm from '@/components/form/EbookForm.vue'
import { Plus } from '@element-plus/icons-vue'
import { ebookList, ebookSave, ebookDelete } from '@/api/interface/web/home'
import { ElMessage, ElMessageBox } from 'element-plus'

const fullscreenLoading = ref(false)
const dataTableRef = ref()
const conditionMethod = () => {
  const cond: any = {}
  return cond
}

const handleAdd = () => {
  dialogVisible.value = true
  curStatus.value = 'add'
}

const handleEdit = (row: any) => {
  curItem.value = row
  dialogVisible.value = true
  curStatus.value = 'edit'
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确认删除?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    ebookDelete({ id: row.id }).then(() => {
      ElMessage({
        message: '删除成功!',
        type: 'success',
      })
      dataTableRef.value.refresh()
    })
  })
}

const EbookFormRef = ref()

const dialogVisible = ref(false)

const curItem = ref<any>({})

const curStatus = ref<any>('add')

const handleDialogClose = () => {
  dialogVisible.value = false
}

const handleDialogSubmit = () => {
  EbookFormRef.value.submitForm().then((data: any) => {
    if (data) {
      fullscreenLoading.value = true
      ebookSave({ ...data })
        .then(() => {
          fullscreenLoading.value = false
          ElMessage({
            message: '操作成功!',
            type: 'success',
          })
          dialogVisible.value = false
          dataTableRef.value.refresh()
        })
        .finally(() => {
          fullscreenLoading.value = false
        })
    }
  })
}
</script>

<template>
  <BasePage v-loading.fullscreen="fullscreenLoading">
    <template #title>订单管理</template>
    <template #toolbar>
      <el-button type="primary" @click="handleAdd">
        <template #icon>
          <el-icon>
            <el-icon><Plus /></el-icon>
          </el-icon>
        </template>
        新增
      </el-button>
    </template>
    <BaseTable
      ref="dataTableRef"
      :init-table-method="ebookList"
      :condition-method="conditionMethod"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="cover" label="封面">
        <template #default="scope">
          <div class="cover">
            <img :src="scope.row.cover" alt="" style="width: 80px; height: 80px" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="category1Id" label="分类1"></el-table-column>
      <el-table-column prop="category2Id" label="分类2"></el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row)"> 编辑 </el-button>
          <el-button type="warning" link @click="handleDelete(scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </BaseTable>
  </BasePage>
  <BaseDrawer v-model="dialogVisible" width="50%">
    <template #title>{{ curStatus == 'add' ? '新增' : '编辑' }}</template>
    <template #footer>
      <el-button type="info" text bg @click="handleDialogClose">取消</el-button>
      <el-button type="primary" @click="handleDialogSubmit">确定</el-button>
    </template>
    <EbookForm ref="EbookFormRef" :data="curItem" :status="curStatus"></EbookForm>
  </BaseDrawer>
</template>
<style lang="scss" scoped></style>
